import React, { Component } from 'react';
import '../styles/Cate.scss'
import * as service from '../api/index'



class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 2,
            list_id:225509,
            list: [],
            list2: []
        }
    }
    async componentDidMount() {
        let res1 = await service.category_list()
        // console.log(res1.data.list);
        this.setState({ list: res1.data.list })

        let res2 = await service.category_subcate({ id: this.state.list_id })
        // console.log(res.data.subcate.subcategory);
        this.setState({ list2: res2.data.subcate.subcategory })


    }
    async handleClick(index) {
        this.setState({ currentIndex: index })
        let res = await service.category_subcate({ id: this.state.list[index].id })
        // console.log(this.state.list[index].id);
        this.setState({ list2: res.data.subcate.subcategory })
    }
    render() {
        return (
            <div className='cate'>
                <div className="aside">
                    {
                        this.state.list &&
                        this.state.list.map((item, index) => {
                            return (
                                <div className={'aside_item ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                    <span>{item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="content">
                    {
                        this.state.list2 &&
                        this.state.list2.map((item2, index) => {
                            return (
                                <div className="list2" key={index}>
                                    <h4>{item2.name}</h4>
                                    <div className="list3">
                                        {
                                            item2.subNavs.map((item3, index) => {
                                                return (
                                                    <div className="list3_item" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">
                                                            {item3.name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>

                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Cate;